import React from 'react'
// ===================================================================== Temp
import DefImage from '@tp/svg/def-img'
// ===================================================================== antd
import { ZoomOutOutlined, ZoomInOutlined, UndoOutlined, RedoOutlined,CloseOutlined } from '@ant-design/icons'
//===================================================================== global declare
const { $fn, $Lazy } = window
// ===================================================================== private component
const Loading 				= $Lazy.load(()=>import('@antd/loading'))
const PreviewImage 			= $Lazy.state(()=>import('#private/pages/preview-image'))
// ===================================================================== component
const imgBox = {
	position: 'absolute',
	zIndex: 9,
	top: 0,
	left: 0,
	width: '100%',
	height: '100%',
	background: 'rgba(0, 0, 0, 0.3)',
	border: '1px solid rgba(0,0,0,0.35)',
	minWidth: '580px',
}
const noImgBox = {
	position: 'relative',
	width: '100%',
	height: '100%',
	minWidth: '580px',
}
const transform = {
	rotate: 0, // 旋转
	scale: 1, // 放大缩小
	ml: 0, // X 轴
	mt: 0, // Y 轴
	wi: '', // 宽度
}
class Index extends React.Component{
	state = {
		transform:$fn.copy(transform),
		loading: false,
		src: this.props.src
	}
	reset = () => {
		this.setState({ transform: $fn.copy(transform)})
	}
	static getDerivedStateFromProps(props, state) {
		if (props.src === '' || props.src === undefined) {
			return {
				src: props.src,
				loading: false
			}
		}
		if (props.src !== state.src) {
			return {
				transform: $fn.copy(transform),
				src: props.src,
				loading: true
			}
		}
		return null
	}
	render(){
		const { transform, loading, src } = this.state
		return (
			<div className='fv' style={ this.props.noBg? noImgBox : imgBox } >
				<div className='rel wh oxys fxc scrollbar' style={{position: 'absolute'}}>
				{ src ?
					<img alt='' id='myImg' style={{
						userSelect: 'none',
						marginTop: transform.mt + 'px',
						marginLeft: transform.ml + 'px',
						transform: `scale(${transform.scale}) rotate(${transform.rotate}deg)`,
						cursor: 'pointer',
						transition: 'transform 0.2s ease 0s',
						maxWidth: '100%',
						position: 'absolute',
					}} onMouseDown= { e => {
						// 鼠标按下 获取 坐标 和 margin
						const startX = e.pageX
						const startY = e.pageY
						const { ml, mt} = this.state.transform
						// 注册全局事件
						document.onmousemove = (e) => {
							// 计算 鼠标移动距离 margin取 鼠标按下时的值
							transform.ml = ml + e.pageX - startX
							transform.mt = mt + e.pageY - startY
							this.setState({ transform })
						}
						document.onmouseup = () => {
							// 鼠标抬起 注销相关事件
							document.onmousemove = null
							document.onmouseup = null
						}
						e.preventDefault();
					} } onError= { () => {
						const img =  document.querySelector('#myImg')
						img.setAttribute('src', '')
						this.setState({ transform: $fn.copy(transform) })
					}} src={ window.$fn.getImagePrefix(src) } onLoad={() => this.setState({loading: false})} 
					onDoubleClick={()=>{
						if(this.props.doubleClick){
							this.previewImage.open(src)
						}
					}}/>
					:
					<div className='g9 f12 abs_full fxmc tc'><div><DefImage size={80} color='#ddd' /><div>无图片</div></div></div>
				}
				<Loading loading={loading} />
				</div>
				<div className=' h28 xl xm fxj ' style = {{ position: 'absolute', top: 0, right: 0,background: 'rgba(0, 0, 0, 0.2)', borderBottomLeftRadius: 14}}>
					<div className='imgBtn xj fxm mlr10' style={{ fontSize: 18, width: 120, color: '#fff'}}>
						<ZoomOutOutlined onClick={ () => {
							transform.scale -= 0.2
							this.setState({transform })
						} } />
						<ZoomInOutlined onClick={ () => {
							transform.scale += 0.2
							this.setState({transform })
						} } />
						<UndoOutlined onClick={ () => {
							transform.rotate -= 90
							this.setState({transform })
						} } style={{transform: 'rotate(90deg)'}} />
						<RedoOutlined onClick={ () => {
							transform.rotate += 90
							this.setState({transform })
						} } style={{transform: 'rotate(-90deg)'}} />
					</div>
					{this.props.noBg?null:<CloseOutlined className='closeIcon pr10' style={{  fontSize: 20, color: '#fff', cursor: 'pointer'}} onClick={()=> this.props.close && this.props.close() } />}
				</div>
				{/* 查看图片 */}
				<PreviewImage onRef	= { ref => this.previewImage = ref }/>
			</div> 	
		)
	}
}

export default Index